<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- v-slot 只能添加在 <template> 上 -->
    <div id="base-layout-demo">
        <base-layout>
            <template v-slot:header>
                <h1>Here might be a page title</h1>
            </template>

            <!-- <template v-slot:default>
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
            </template> -->
            <p>A paragraph for the main content.</p>
            <p>And another one.</p>

            <template v-slot:footer>
                <p>Here's some contact info</p>
            </template>
        </base-layout>
    </div>

    <!-- 作用域插槽 -->
    <div id="current-user-demo">
        <!-- <current-user>
            <template v-slot:default="slotProps">
                {{ slotProps.user.firstName }}
            </template>
        </current-user> -->

        <!-- 独占默认插槽的缩写语法：被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。 -->
        <!-- <current-user v-slot:default="slotProps">
            {{ slotProps.user.firstName }}
        </current-user> -->
        <current-user v-slot="slotProps">
            {{ slotProps.user.firstName }}
        </current-user>

        <!-- 只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法： -->
        <!-- <current-user>
            <template v-slot:default="slotProps">
                {{ slotProps.user.firstName }}
            </template>

            <template v-slot:other="otherSlotProps">
                ...
            </template>
        </current-user> -->

        <!-- 解构插槽 Prop -->
        <!-- 将 user 重命名为 person -->
        <current-user v-slot="{ user: person }">
            {{ person.firstName }}
        </current-user>

        <!-- 用于插槽 prop 是 undefined 的情形 -->
        <current-user v-slot="{ user = { firstName: 'Guest' } }">
            {{ user.firstName }}
        </current-user>

    </div>
</body>
<script>
    Vue.component('base-layout', {
        template: `
            <div class="container">
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <slot></slot>
                </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            </div>
        `
    })
    new Vue({ el: '#base-layout-demo' });

    Vue.component('current-user', {
        props: {
            user: {
                type: Object,
                default: function () {
                    return {
                        firstName: 'Default First Name',
                        lastName: 'Default Last Name'
                    };
                }
            }
        },
        template: `
            <span>
                <slot v-bind:user="user">
                    {{ user.lastName }}
                </slot>
            </span>
        `
    })
    new Vue({ el: '#current-user-demo' });
</script>

</html>